<template>
  <el-container>
    <el-header v-if="detailStatus">
      <el-form ref="queryData" :model="queryData" inline size="mini" style="height: 30px;">
        <el-form-item prop="merchantName">
          <el-input v-model="queryData.merchantName" placeholder="商户名称" style="width: 120px;" />
        </el-form-item>
        <el-form-item prop="merchantCode">
          <el-input v-model="queryData.merchantCode" placeholder="商户号码" style="width: 120px;" />
        </el-form-item>
        <el-form-item prop="shopName">
          <el-input v-model="queryData.shopName" placeholder="门店名称" style="width: 120px;" />
        </el-form-item>
        <el-form-item prop="terminalNo">
          <el-input v-model="queryData.terminalNo" placeholder="终端号" style="width: 120px;" />
        </el-form-item>
        <el-form-item prop="orderNo">
          <el-input v-model="queryData.orderNo" placeholder="订单号码" style="width: 120px;" />
        </el-form-item>
        <el-form-item prop="cardNo">
          <el-input v-model="queryData.cardNo" placeholder="会员卡" style="width: 120px;" />
        </el-form-item>
        <el-form-item prop="mobile">
          <el-input v-model="queryData.mobile" placeholder="手机号" style="width: 120px;" />
        </el-form-item>


        <el-form-item>
          <span>是否优惠：</span>
          <el-select v-model="queryData.discountFlag" placeholder="请选择">
            <el-option
              v-for="item in discountFlagOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>

        <el-form-item>
          <span>订单类型：</span>
          <el-select v-model="queryData.type" placeholder="请选择">
            <el-option
              v-for="item in toPupTypeOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>

        <el-form-item>
          <span>订单状态：</span>
          <el-select v-model="queryData.status" placeholder="请选择">
            <el-option
              v-for="item in toPupStatusOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>

        <el-form-item>
          <span>交易时间：</span>
          <el-date-picker
            v-model="setUpTime"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            align="right"
          />
        </el-form-item>

        <el-form-item>
          <el-button type="primary" plain icon="el-icon-search" size="mini" @click="queryPageList">查询</el-button>
          <el-button type="info" icon="el-icon-refresh" size="mini" @click="reset('queryData')">重置</el-button>
        </el-form-item>
      </el-form>
    </el-header>
    <el-main v-if="detailStatus" style="margin-top:100px">
      <el-table :data="pageTableData" border size="small" max-height="700">
        <el-table-column label="订单" prop="id" header-align="center" align="center" width="65" />
        <el-table-column label="商户名" prop="merchantName" header-align="center" align="center" width="120" />
        <el-table-column label="门店名称" prop="shopName" header-align="center" align="center" width="120" />
        <el-table-column label="会员名" prop="memberName" header-align="center" align="center" width="80" />
        
        <el-table-column label="储值金额" prop="amount" header-align="center" align="center" width="80" />
        <el-table-column label="消费金额" prop="amount" header-align="center" align="center" width="80" />


        <!-- <el-table-column label="活动类型" prop="activityType" header-align="center" align="center" width="120">
          <template slot-scope="scope">
　　　　　　　<span v-if="scope.row.activityType=== 1">会员卡消费折扣</span>
　　　　　　　<span v-if="scope.row.activityType=== 2">会员卡充值满赠</span>
            <span v-if="scope.row.activityType=== 3">会员卡消费满赠</span>
          </template>
        </el-table-column> -->
        <!-- <el-table-column label="活动对象" prop="activityObj" header-align="center" align="center" width="120">
          <template slot-scope="scope">
　　　　　　　　<span v-if="scope.row.activityObj=== 1">新会员</span>
　　　　　　　　<span v-if="scope.row.activityObj=== 2">老会员</span>
　　　　　　</template>
        </el-table-column> -->
        <!--隐藏列-->
        <!-- <el-table-column v-if="show" label="活动规则" width="200">
          <el-row  v-for="(item, index) in activityForm.activityDetail" :key="index" >
            <span>会员卡折扣满</span>
            <span>{{item.ruleFull}}</span>
            <span>元，打</span>
            <span>{{item.ruleDiscount}}</span>
            <span>折</span>
          </el-row>
        </el-table-column> -->

        <!-- <el-table-column label="创建时间" prop="createTime" header-align="center" align="center" width="160" /> -->
        <el-table-column label="交易时间" prop="orderTime" header-align="center" align="center" width="160" />
        <el-table-column label="是否有优" prop="discountFlag" header-align="center" align="center" width="65">
          <template slot-scope="scope">
　　　　　　　　<span v-if="scope.row.discountFlag=== 0">否</span>
　　　　　　　　<span v-if="scope.row.discountFlag=== 1">是</span>
　　　　　　</template>
        </el-table-column>
        <el-table-column label="交易状态" prop="status" header-align="center" align="center" width="65">
          <template slot-scope="scope">
　　　　　　　　<span v-if="scope.row.status=== 1">待付款</span>
　　　　　　　　<span v-if="scope.row.status=== 2">已取消</span>
               <span v-if="scope.row.status=== 3">付款成功未充值</span>
　　　　　　　　<span v-if="scope.row.status=== 4">付款成功已充值</span>
               <span v-if="scope.row.status=== 5">用户已发起退款未更改账户</span>
　　　　　　　　<span v-if="scope.row.status=== 6">已退款</span>
　　　　　　</template>
        </el-table-column>
        <el-table-column label="操作" fixed="right" header-align="center" align="center" min-width="200">
          <template slot-scope="scope">
            <el-button
              type="text"
              size="mini"
              @click="queryCard(scope.row)"
            >查看详情</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-main>
    <el-footer v-if="detailStatus" style="text-align: right">
      <el-pagination
        :current-page="queryData.pageNum"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="queryData.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="queryData.totalCount"
        @size-change="pageSizeChange"
        @current-change="pageCurrentChange"
      />
    </el-footer>
    <div v-if="!detailStatus">
      <div style="padding-top:20px">
        <el-tabs type="border-card" v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="消费详情" name="consume">
            <div class="title">
              <span>消费清单</span>
            </div>
            <div style="background-color:rgb(231, 231, 231)">
            <el-row :gutter="20">
              <el-col :span="8">
                <span class="detail">交易门店：</span>
                <span>{{consumeDetail.shopName}}</span>
              </el-col>
              <el-col :span="8">
                <span>消费订单号：</span>
                <span>{{consumeDetail.orderNo}}</span>
              </el-col>
              <el-col :span="8">
                <span>终端号：</span>
                <span>{{consumeDetail.terminalNo}}</span>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="8">
                <span class="detail">会员昵称：</span>
                <span>{{consumeDetail.memberName}}</span>
              </el-col>
              <el-col :span="8">
                <span>会员卡号：</span>
                <span>{{consumeDetail.cardNo}}</span>
              </el-col>
              <el-col :span="8">
                <span>会员手机号：</span>
                <span>{{consumeDetail.mobile}}</span>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="8">
                <span class="detail">会员积分：</span>
                <span>{{consumeDetail.score}}</span>
              </el-col>
            </el-row>
          </div>
          <div class="title">
            <span>支付信息</span>
          </div>
          <div style="background-color:rgb(231, 231, 231)">
           

            <el-row :gutter="20">
              <el-col :span="8">
                <span class="detail">支付类型：</span>
                <span v-if="consumeDetail.payType===10">微信</span>
                <span v-if="consumeDetail.payType===20">支付宝</span>
                <span v-if="consumeDetail.payType===60">qq钱包</span>
                <span v-if="consumeDetail.payType===90">口碑</span>
                <span v-if="consumeDetail.payType===100">翼支付</span>
                <span v-if="consumeDetail.payType===140">和包支付（仅限和包通道）</span>
                <span v-if="consumeDetail.payType===150">福卡支付</span>
              </el-col>
              <el-col :span="8">
                <span>支付状态：</span>
                <span v-if="consumeDetail.status===0">支付成功</span>
              </el-col>
              <el-col :span="8">
                <span>订单金额：</span>
                <span>{{consumeDetail.orderAmt}}</span>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="8">
                <span class="detail">商家优惠金额：</span>
                <span>{{consumeDetail.giveAmt}}</span>
              </el-col>
              <el-col :span="8">
                <span>会员实付金额：</span>
                <span>{{consumeDetail.realAmt}}</span>
              </el-col>
              <el-col :span="8">
                <span>商家实收金额：</span>
                <span>{{consumeDetail.realCollectAmt}}</span>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="8">
                <span class="detail">会员卡余额：</span>
                <span>{{consumeDetail.currentBalance}}</span>
              </el-col>
            </el-row>

            <el-row :gutter="20">
              <el-col :span="8">
                <span class="detail">优惠劵名称：</span>
                <span>{{consumeDetail.couponName}}</span>
              </el-col>
              <el-col :span="8">
                <span>优惠劵类型：</span>
                <span v-if="consumeDetail.couponType===1">满减券</span>
                <span v-if="consumeDetail.couponType===2">定额有门槛</span>
                <span v-if="consumeDetail.couponType===3">定额无门槛</span>
              </el-col>
              <el-col :span="8">
                <span>优惠规则：</span>
                <span>{{consumeDetail.couponRule}}</span>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="8">
                <span class="detail">活动名称：</span>
                <span>{{consumeDetail.activityName}}</span>
              </el-col>
              <el-col :span="8">
                <span>活动类型：</span>
                <span v-if="consumeDetail.activityType===1">会员卡消费折扣</span>
                <span v-if="consumeDetail.activityType===2">会员卡充值满赠</span>
                <span v-if="consumeDetail.activityType===3">会员卡消费满赠</span>
              </el-col>
              <el-col :span="8">
                <span>活动规则：</span>
                <span>{{consumeDetail.activityRule}}</span>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="8">
                <span class="detail">备注：</span>
                <span>{{consumeDetail.remark}}</span>
              </el-col>
            </el-row>
          </div>
          <div class="title">
            <span>时间列表</span>
          </div>
          <div style="background-color:rgb(231, 231, 231)">
            <el-row :gutter="20">
              <el-col :span="8">
                <span class="detail">订单创建时间：</span>
                <span>{{consumeDetail.createTime}}</span>
              </el-col>
              <el-col :span="8">
                <span class="detail">交易完成时间：</span>
                <span>{{consumeDetail.finishTime}}</span>
              </el-col>
              <el-col :span="8">
                <span class="detail">终端交易时间：</span>
                <span>{{consumeDetail.terminalTime}}</span>
              </el-col>
            </el-row>
          </div>
          </el-tab-pane>
          <el-tab-pane label="充值详情" name="recharge">
            <div class="title">
              <span>充值订单</span>
            </div>
            <div style="background-color:rgb(231, 231, 231)">
            <el-row :gutter="20">
              <el-col :span="8">
                <span class="detail">交易门店：</span>
                <span>{{rechargeDetail.shopName}}</span>
              </el-col>
              <el-col :span="8">
                <span>消费订单号：</span>
                <span>{{rechargeDetail.orderNo}}</span>
              </el-col>
              <el-col :span="8">
                <span>终端号：</span>
                <span>{{rechargeDetail.terminalNo}}</span>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="8">
                <span class="detail">会员昵称：</span>
                <span>{{rechargeDetail.memberName}}</span>
              </el-col>
              <el-col :span="8">
                <span>会员卡号：</span>
                <span>{{rechargeDetail.cardNo}}</span>
              </el-col>
              <el-col :span="8">
                <span>会员手机号：</span>
                <span>{{rechargeDetail.mobile}}</span>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="8">
                <span class="detail">会员积分：</span>
                <span>{{rechargeDetail.score}}</span>
              </el-col>
            </el-row>
          </div>
          <div class="title">
              <span>支付信息</span>
          </div>
          <div style="background-color:rgb(231, 231, 231)">
            <el-row :gutter="20">
              <el-col :span="8">
                <span>支付方式：</span>
                <span v-if="rechargeDetail.payType===10">微信</span>
                <span v-if="rechargeDetail.payType===20">支付宝</span>
                <span v-if="rechargeDetail.payType===60">qq钱包</span>
                <span v-if="rechargeDetail.payType===90">口碑</span>
                <span v-if="rechargeDetail.payType===100">翼支付</span>
                <span v-if="rechargeDetail.payType===140">和包支付（仅限和包通道）</span>
                <span v-if="rechargeDetail.payType===150">福卡支付</span>
              </el-col>
              <el-col :span="8">
                <span>支付类型：</span>
                <!-- <span v-if="rechargeDetail.status===0">支付成功</span> -->
              </el-col>
              <el-col :span="8">
                <span>支付状态：</span>
                <span v-if="rechargeDetail.status===1">待付款</span>
                <span v-if="rechargeDetail.status===2">已取消</span>
                <span v-if="rechargeDetail.status===3">付款成功未充值</span>
                <span v-if="rechargeDetail.status===4">付款成功已充值</span>
                <span v-if="rechargeDetail.status===5">用户已发起退款未更改账户</span>
                <span v-if="rechargeDetail.status===6">已退款</span>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="8">
                <span>充值金额：</span>
                <span>{{rechargeDetail.amount}}</span>
              </el-col>
              <el-col :span="8">
                <span class="detail">赠送金额：</span>
                <span>{{rechargeDetail.giveAmount}}</span>
              </el-col>
              <el-col :span="8">
                <span>会员实付金额：</span>
                <span>{{rechargeDetail.realAmount}}</span>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="8">
                <span class="detail">参与活动名称：</span>
                <span>{{rechargeDetail.activityName}}</span>
              </el-col>
              <el-col :span="8">
                <span>活动类型：</span>
                <span v-if="rechargeDetail.activityType===1">会员卡消费折扣</span>
                <span v-if="rechargeDetail.activityType===2">会员卡充值满赠</span>
                <span v-if="rechargeDetail.activityType===3">会员卡消费满赠</span>
              </el-col>
              <el-col :span="8">
                <span>活动规则：</span>
                <span>{{rechargeDetail.activityRule}}</span>
              </el-col>
            </el-row>

             <el-row :gutter="20">
              <el-col :span="8">
                <span class="detail">充值类型：</span>
                <span>{{rechargeDetail.rechargeType}}</span>
              </el-col>
              <el-col :span="8">
                <span class="detail">会员卡余额：</span>
                <span>{{rechargeDetail.currentBalance}}</span>
              </el-col>
              <el-col :span="8">
                <span>是否推送：</span>
                <!-- <span>{{rechargeDetail.couponRule}}</span> -->
              </el-col>
            </el-row>

            <el-row :gutter="20">
              <el-col :span="8">
                <span>备注：</span>
                <span>{{rechargeDetail.remark}}</span>
              </el-col>
            </el-row>
          </div>
          <div class="title">
              <span>时间列表</span>
          </div>
          <div style="background-color:rgb(231, 231, 231)">
            <el-row :gutter="20">
              <el-col :span="8">
                <span class="detail">订单创建时间：</span>
                <span>{{rechargeDetail.createTime}}</span>
              </el-col>
              <el-col :span="8">
                <span class="detail">交易完成时间：</span>
                <span>{{rechargeDetail.finishTime}}</span>
              </el-col>
              <el-col :span="8">
                <span class="detail">终端交易时间：</span>
                <span>{{rechargeDetail.terminalTime}}</span>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="8">
                <span class="detail">结算处理时间：</span>
                <span>{{rechargeDetail.createTime}}</span>
              </el-col>
            </el-row>
          </div>
          </el-tab-pane>
        </el-tabs>
      </div>
      <el-button type="primary" @click="returnCardList">返回列表</el-button>
    </div>
  </el-container>
</template>

<script>
import { memberAjax } from 'Ajax'
export default {
  name: 'MemberTopupConsumption',
  data(){
    return{
      amountStatus:0,
      currentRowId:'',
      setUpTime: [],
      show: false,
      activeName: 'consume',
      detailStatus: true,
      consumeDetail:{
        shopName: 'test2',
        orderNo: '12345',
        terminalNo: '345678',
        memberName: 'test3',
        cardNo: '23456',
        mobile: '1234567890',
        score: 1234,
        payType: 10,
        status: 0,
        orderAmt: 12345,
        giveAmt: 1234,
        realAmt: 123,
        realCollectAmt: 1234,
        currentBalance: 234,
        couponName: 'tewt',
        couponType: 1,
        couponRule: '满减2',
        activityName: 'test99',
        activityType: 1,
        activityRule: 'test',
        remark: '重要',
        createTime: '2021-04-24 16:32:00',
        finishTime: '2021-04-24 16:32:00',
        terminalTime: '2021-04-24 16:32:00',
      },
      rechargeDetail:{
        shopName: 'test2',
        orderNo: '12345',
        terminalNo: '345678',
        memberName: 'test3',
        cardNo: '23456',
        mobile: '1234567890',
        score: 1234,
        payType: 10,
        status: 0,
        amount: 2347,
        giveAmount: 12345,
        realAmount: 4567,
        rechargeType: '',
        couponRule: '是',
        orderAmt: 12345,
        giveAmt: 1234,
        realAmt: 123,
        realCollectAmt: 1234,
        currentBalance: 234,
        couponName: 'tewt',
        couponType: 1,
        couponRule: '满减2',
        activityName: 'test99',
        activityType: 1,
        activityRule: 'test',
        remark: '重要',
        createTime: '2021-04-24 16:32:00',
        finishTime: '2021-04-24 16:32:00',
        terminalTime: '2021-04-24 16:32:00',
      },
      queryData: {
        merchantName: '', 
        merchantCode: '', 
        shopName: '',
        terminalNo: '',
        orderNo: '',
        cardNo: '',
        mobile: '',
        discountFlag: 1,
        type: 2,
        status: 3,
        startTime: '',
        endTime: '',
        pageNum: 1,
        pageSize: 10,
        totalCount: 0
      },
      discountFlagOptions: [
        {
          value: 0,
          label: '否'
        },
        {
          value: 1,
          label: '是'
        }
      ],
      toPupTypeOptions:[
        {
          value: 1,
          label: '用户充值'
        },
        {
          value: 2,
          label: '用户消费'
        },
        {
          value: 3,
          label: '平台充值'
        },
        {
          value: 4,
          label: '平台核销'
        },
        {
          value: 5,
          label: '退款'
        }
      ],
      toPupStatusOptions:[
        {
          value: 1,
          label: '待付款'
        },
        {
          value: 2,
          label: '已取消'
        },
        {
          value: 3,
          label: '付款成功未充值'
        },
        {
          value: 4,
          label: '付款成功已充值'
        }
      ],
      pageTableData:[
        {
          id: '123456',
          merchantName: 'test1',
          shopName: '武汉',
          memberName: '测试',
          amount:200,
          merchantCode: 100000,
          activityType: 2,
          orderTime: '2021-04-24 13:00:39',
          discountFlag: 0,
          status: 1
        }
      ]
    }
  },
  methods:{
    returnCardList(){
      this.detailStatus = true
    },
    pageSizeChange(val) {
      this.queryData.pageSize = val
      this.queryPageList()
    },
    pageCurrentChange(val) {
      this.queryData.pageNum = val
      this.queryPageList()
    },
    handleClick(tab,event){
    },
    queryCard(row) {
      this.detailStatus = false
      this.consumeDetailQuery(row)
      this.rechargeDetailQuery(row)
    },
    consumeDetailQuery(row){
      memberAjax.consumeDetail({'id':row.id}).then(res =>{
        this.consumeDetail = res
      })
    },
    rechargeDetailQuery(row){
      memberAjax.rechargeDetail({'id':row.id}).then(res =>{
        this.rechargeDetail = res
      })
    },
    queryPageList() {
      if (this.setUpTime && this.setUpTime.length>0) {
        this.queryData.startTime = this.setUpTime[0].toLocaleString()
        this.queryData.endTime = this.setUpTime[1].toLocaleString()
      }else{
        this.queryData.startTime = ''
        this.queryData.endTime = ''
      }
      memberAjax.transList(this.queryData).then(res =>{
        // this.pageTableData = res.list
        // for(var pageObj of this.pageTableData){
        //   pageObj = amountStatus
        // }
        this.queryData.totalCount = res.totalCount
      })
    },
    reset(formName) {
      this.$refs[formName].resetFields();
      this.queryData.status = '0'
      this.setUpTime = []
    }
  }
}
</script>

<style scoped>
.el-row{
  padding:5px;
  font-weight: 500;
}
.title{
  padding:5px;
}
</style>
